<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--<link rel="stylesheet" type="text/css" href="../../css/aui.css"/>-->
		<link rel="stylesheet" type="text/css" href="../../css/gou-wc.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/libs/core.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/libs/home.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/libs/icon.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/libs/swiper.min.css"/>

		<style>
			.aui-header-bg{background: #2a8fff;background-image: none}
			.active    {
				color: rgb(239, 11, 33) !important;
			font-size: 0.2rem;
			}
		</style>
		<script src="../../js/common.js"></script>
		<!--<script src="../../js/libs/angular-1.4.6.min.js"></script>-->
		<!--<script src="../../js/libs/angular-ui-router.js"></script>-->
		<script src="../../js/libs/rem.js"></script>
		<script src="../../js/libs/swiper.min.js"></script>
		<script src="../../js/libs/jquery-3.1.1.min.js"></script>
		<script src="../../js/aui-toast.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/vue-resource.min.js"></script>
		<title></title>
	</head>
	<body>
		
		<div id="box">
			<!--头部-->
			<div class="gwc-header aui-header-fixed aui-header-bg">
				<a href="#"  class="header-left">
					<i class="aui-icon aui-icon-back-white"></i>
				</a>
				<section>购物车</section>
				<a href="#none" class="header-bj" @click.prevent="updateCart">
				  	<p>编辑</p>
				</a>
			</div>
			<div style="height: 0.448rem;"></div>
			<!--优购优品网-->
			<div id="app">
			<div class="rotel" v-for="(c,index) in cartViewArr">
				<div class="you-gou">
					<section class="yg-left">
						<input type="checkbox" v-model=" c.shopCheck"  @click="shopAllSelect(c,index)"/>
						<a href="javascript:;">
							<img src="../../img/gwc/gwc-demo.png"/>
							{{c.catName}}
						</a>
					</section>

				</div>
				<!--购物车内容-->
				<ul class="gwc-content">
					<li v-for="i in c.list">
						<div class="borbot">
							<p>
								<input type="checkbox" v-model="i.isCheck" @click="singSelect(i,index)"/>
							</p>
							<a class="oImg" href="#">
								<img :src="orImg(i.goodsImg)" />
							</a>
							<dl>
								<article>
									<div>
										<div class="hmzy">华猫自营</div>
										{{i.goodsName}}
									</div>


									<dt>
										<span>{{i.catName}}</span>
										<span>{{i.specName}}</span>
										<!--<span>{{i.widhei}}</span>  -->
									</dt>
									<dt>
										<section>{{i.shopPrice | formatMoney}}</section>
										<i>+{{2000}}积分</i>
										<i v-show="!isEditor">x{{i.cartNum}}</i>
										<section v-show="isEditor">
											<a style="color: #cccccc;font-size: 0.2rem;" @click="cartNum(-1,i,$event)">-</a>
											<span style="color: #666666;">{{i.cartNum}}</span>
											<a href="#none"  style="font-size: 0.2rem;color: #ccc ;"  @click="cartNum(1,i,$event)">+</a>
										</section>
									</dt>
								</article>
							</dl>
						</div>
					</li>
				</ul>
			</div>
			<div style="height: .5rem;"></div>
			<!--页脚-->
			<div class="gwc-footer" v-show="!isEditor">
				<div class="gwc-footer-left">
					<input type="checkbox" v-model="allChecked" @click="selectAll"/>
					全选
				</div>
 				<div class="gwc-footer-conter">
 					<span class="he-ji">合计:{{totalMoney |formatMoney}}</span>
 					<span class="zong-jia"></span>
 				</div>
 				<div class="jfjf">
 					<span class="jf">积分:</span>
 					<span class="jfs"></span>
 				</div>

			    <div class="gwc-footer-right" @click="submitCart">
			    	<a href="#">结算</a>
			    </div>
			</div>
			<!--购物车编辑-->
			<div  class="gwc-bj" v-show="isEditor">
				<div class="gwc-footer-left">
					<input type="checkbox" v-model="allChecked" @click="selectAll"/>
					全选
				</div>
				<div>
					<div class="gwc-sc" @click="deleteCart">
						删除
					</div>
					<div class="gwc-gz">
						移入关注
					</div>

				</div>


			</div>
			
		</div>
		</div>
		
	</body>
	<script>
		setToken();
	new Vue({
		 el:'#box',
		data:{
		     cartViewArr:[],
			isActive:1,
			isChecked:0,
			allChecked:1,
			shopCheck:true,
			isEditor:false

		},
		filters:{
		  formatMoney:function (val) {
			  return '￥'+returnFloat(val)
          }
		},
		mounted:function(){
		    this.$nextTick(function () {
				this.cartView();


            })
		},
		computed:{
		  totalMoney:function () {
		      var t=0;
			  this.cartViewArr.forEach(function (v,i) {
			      v.list.forEach(function (o,j) {
                    //  console.log(o)
					  if(o.isCheck){
                          t+=o.specPrice*o.cartNum
					  }
                  })
              });
			  return returnFloat(t);
          }
		},
		methods:{
		    cartView:function () {
		        var _this=this;
				_this.$http.get(SURL+'app/Carts/carts',{params:{pageIndex:1}}).then(function (res) {
					//console.log(res)
					if(res.body.status==1){
                        _this.cartViewArr=res.body.data.maps;
                        _this.cartViewArr.forEach(function (v,i) {
                            if(typeof v.shopCheck=='undefined'){
                                _this.$set(v,'shopCheck',1)
                            }
                        });
					}else{
						alert(res.body.msg)
					}

					_this.defaultSelect()
                })
            },
			//数量++

			cartNum:function (f,item,event) {
		       $(event.currentTarget).addClass('active') && $(event.currentTarget).siblings('a').removeClass('active');
				if(f>0){
					item.cartNum++;
					//this.isActive=1
				}else{
				    if(item.cartNum<=1){
				        item.cartNum=1;
					}
                    //this.isActive=0;
					item.cartNum --
				}

                // 更新cartNum

                    this.$http.get(SURL+'app//Carts/updateCartNum',{params:{cartNum:item.cartNum,cartId:item.cartId}}).then(function (res) {
                        console.log(res)
                        if(res.body.status==1){
                            //this.band+=this.num;
                            showDefault('success','加入成功')
                        }else{
                            showDefault('fail',res.body.msg)
                        }
                    })


            },
			//多选 全选
			selectAll:function () {
		        var _this=this,n=0;
		        _this.allChecked=!_this.allChecked;
                _this.cartViewArr.forEach(function (v,i) {
                    v.shopCheck=_this.allChecked;
                   v.list.forEach(function (o,j) {
                       o.isCheck=_this.allChecked;
                   })
                });
            },
			//单选
			singSelect:function (item,index) {

                var _this = this;
                item.isCheck = !item.isCheck;
                var _this = this, n = 0, m = 0;
                item.isCheck=item.isCheck==false?0:1;
                _this.$http.get(SURL+'app/Carts/cartsCheck',{params:{cartId:item.cartId,isCheck:item.isCheck,userId:item.userId}}).then(function (res) {
                    if(res.body.status==1){
                        _this.cartViewArr[index].list.forEach(function (o, j) {
                            if (o.isCheck) {
                                n += 1;
                            }
                            if (n >= _this.cartViewArr[index].list.length) {

                                _this.cartViewArr[index].shopCheck = true
                            } else {
                                _this.cartViewArr[index].shopCheck = false
                            }
                        })
					}else{
                        //
					}

				//	console.log(res)
                }).catch(function (res) {
				//	console.log(res)
                })

            },
			//店铺全选功能
			
			shopAllSelect:function (item,index) {
		        item.shopCheck=!item.shopCheck
				item.list.forEach(function (v,i) {

					if(item.shopCheck){
					    v.isCheck=true
					}else{
					    v.isCheck=false
					}
                })
            },
			//所有店铺都选中状态下，全选默认选中
			defaultSelect:function () {
		        var n=0,_this=this;
				_this.cartViewArr.forEach(function (v,i) {
					if(v.shopCheck){
					    n+=1
					}
					//console.log(n)
					//console.log('xxxx:'+_this.cartViewArr.length);
					if(n>=_this.cartViewArr.length){
					 //   alert(1)
					    _this.allChecked=true
					}else{
					    _this.allChecked=false
					}
                })
            },
			//删除购物车商品
            deleteCart:function(){
				var _this=this,cartId=[];
                _this.cartViewArr.forEach(function (v,i) {
                    v.list.forEach(function (o,j) {
                        if(o.isCheck){
                            cartId.push(o.cartId);
                        }
                    })
                });
                var str=cartId.join(',');
                _this.$http.get(SURL+'app/Carts/delCarts',{params:{cartId:str}}).then(function (res) {

                    if(res.body.status==1){
                      //  showDefault('success','删除成功');

                        _this.cartView();
                    }else{
                        //showDefault('fail','删除失败')
					}
                })


			},
			//点击编辑，如果isEditor当前状态为FALSE;则要重新请求当前购无车
			updateCart:function(){
		        this.isEditor=!this.isEditor;
		        if(!this.isEditor){
		            this.cartView()
				}
			},
			//提交订单
            submitCart:function () {
				this.$http.get(SURL+'app/Carts/checkCarts').then(function (res) {
					//console.log(res)
					if(res.body.status==1){
					    location.href="../orderAndPay/enterOrder.html"
					}
                })

            }


		}
	})


	
		
	</script>
</html>
